<script setup lang="ts">
import { ref } from "@vue/reactivity";
import VShare from "../share.vue"
import {useRouter} from "vue-router"
const router = useRouter()
let isShows = ref<boolean[]>([false,false,false])
let readCollect = (id:number) => {
    isShows.value[id] = !isShows.value[id]
}

let showShare = ref(false)
const share = () => {
    showShare.value = true
}
const close = () => {
    showShare.value = false
}
const toReadView = () => {
    router.push({name:'readview'})
}
</script>

<template>
    <div class="readhomeCardContainer common-card-style">
        <div class="card-type">- 阅 读 -</div>
        <div class="title">麦田里的守望者</div>
        <span class="userName">文 / 大头马</span>
        <div class="article-desc">一个真正顶尖的拳手，出拳时会像外科医生做手术般精准。</div>
        <div class="bg-img" @click="toReadView">
            <img
                src="https://img0.baidu.com/it/u=857510153,4267238650&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675"
                alt="bg.jpeg"
            />
        </div>
        <div class="card-options">
            <div class="option-item">
                <span :class="!isShows[0]?'iconfont icon-weiguanzhu' : 'iconfont icon-yiguanzhu'" @click="readCollect(0)"></span>
                <span class="option-desc">1170</span>
            </div>
            <div class="option-item iconfont icon-31zhuanfa" @click="share"></div>
        </div>
    </div>
    <div class="questionCardContainer common-card-style">
        <div class="card-type">- 问 答 -</div>
        <div class="title">如果爱人失忆，你还会爱吗？</div>
        <span class="userName">天才铺手计划</span>
        <div class="article-desc">自从老公患上白血病，静红从我这里不知收到过多少次病重通知书，所幸她一次次陪着老于挺了过来。但眼下在鬼门关又走了一遭之后，老于只认得父母，却忘记了妻子和女儿。静红以为老于只是短暂失忆，没想到因为白血病感染，他从一个高才生、成功的北漂商人，一下子变成了智商只有5岁的“痴傻儿”。</div>
        <div class="bg-img" @click="toReadView">
            <img
                src="https://img0.baidu.com/it/u=857510153,4267238650&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675"
                alt="bg.jpeg"
            />
        </div>
        <div class="card-options">
            <div class="option-item">
                <span :class="!isShows[1]?'iconfont icon-weiguanzhu' : 'iconfont icon-yiguanzhu'" @click="readCollect(1)"></span>
                <span class="option-desc">1170</span>
            </div>
            <div class="option-item iconfont icon-31zhuanfa" @click="share"></div>
        </div>
    </div>
    <!-- <div class="radioCardContainer common-card-style">
        <div class="card-type">- 电 台 -</div>
    </div> -->
    <v-share @close="close" :showShare="showShare"/>
</template>


<style lang="less" scoped>
.common-card-style {
    margin-top: 10px;
    background: #fff;
    padding: 20px;
    .card-type {
        text-align: center;
        font-size: 13px;
        color: #999;
    }
    .article-desc {
        margin: 20px 0 10px;
        line-height: 25px;
        color: #666;
        font-size: 15px;
    }
    .card-options{
        display: flex;
        justify-content: right;
        color: #999;
        .option-item{
            margin-left: 20px;
        }
    }
    .iconfont {
        font-size: 30px;
    }
}
.readhomeCardContainer {
    .userName {
        font-size: 13px;
        color: #999;
    }
    .title {
        margin: 20px 0 5px;
        font-size: 20px;
    }

    .bg-img {
        width: 100%;
        overflow: hidden;
        height: 200px;
        img {
            border-radius: 10px;
            width: 100%;
            height: auto;
        }
    }
}
.questionCardContainer {
    .userName {
        font-size: 13px;
        color: #999;
    }
    .title {
        margin: 20px 0 5px;
        font-size: 20px;
    }

    .bg-img {
        width: 100%;
        overflow: hidden;
        height: 200px;
        img {
            border-radius: 10px;
            width: 100%;
            height: auto;
        }
    }
}
.radioCardContainer {
}
</style>